<template>
  <div class="supermarket">
    <div class="tag-content market-search-box">
      <div class="logo"><img src="./img/logo.png" />标签超市</div>
      <search-box ref="searchBox" @onSearch="onSearch"></search-box>
    </div>
    <div class="recommend-box">
      <div class="tag-content">
        <market-cate title="标签体系导航" @cateClick="cateClick" />
        <div class="recommend">
          <el-row :gutter="60">
            <el-col :span="8">
              <div class="recommend-item">
                <div class="sign">
                  <div class="icon" :class="swiperIcon.hot"><icon-svg :name="swiperIcon.hot"></icon-svg></div>
                </div>
                <h3><img src="./img/hot.png" />部门内热门</h3>
                <el-carousel
                  arrow="never"
                  :interval="5000"
                  @change="changeHotIcon"
                  height="370px"
                  v-if="hotList.albumList.length || hotList.tagList.length"
                >
                  <template v-for="(hot, index) in hotList">
                    <el-carousel-item :key="index" v-if="hot.length">
                      <ul>
                        <li v-for="item in hot" :key="item.assetId" @click="handleClick(item)">
                          <span class="symbol increase" v-if="item.rankingSn - item.lastRankingSn < 0">
                            <icon-svg name="iconArrowUp"></icon-svg>
                          </span>
                          <span class="symbol decrease" v-else-if="item.rankingSn - item.lastRankingSn > 0">
                            <icon-svg name="iconArrowDown"></icon-svg>
                          </span>
                          <span class="symbol" v-else>--</span>
                          <p>
                            {{ item.assetNm }}
                          </p>
                        </li>
                      </ul>
                    </el-carousel-item>
                  </template>
                </el-carousel>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="recommend-item">
                <div class="sign">
                  <div class="icon" :class="swiperIcon.fav"><icon-svg :name="swiperIcon.fav"></icon-svg></div>
                </div>
                <h3><img src="./img/fav.png" />猜你喜欢</h3>
                <el-carousel
                  arrow="never"
                  :interval="5000"
                  @change="changeFavIcon"
                  height="370px"
                  v-if="favList.albumList.length || favList.tagList.length"
                >
                  <template v-for="(fav, index) in favList">
                    <el-carousel-item :key="index" v-if="fav.length">
                      <ul>
                        <li v-for="item in fav" :key="item.assetId" @click="handleClick(item)">
                          <span class="icon hot-icon" v-if="item.mark === 1"><img src="./img/hot-icon.png"/></span>
                          <p>
                            {{ item.assetNm }}
                          </p>
                        </li>
                      </ul>
                    </el-carousel-item>
                  </template>
                </el-carousel>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="recommend-item">
                <div class="sign">
                  <div class="icon" :class="swiperIcon.rank"><icon-svg :name="swiperIcon.rank"></icon-svg></div>
                </div>
                <h3><img src="./img/rank.png" />排行榜</h3>
                <el-carousel
                  arrow="never"
                  :interval="5000"
                  @change="changeRankIcon"
                  height="370px"
                  v-if="rankList.albumList.length || rankList.tagList.length"
                >
                  <template v-for="(rank, index) in rankList">
                    <el-carousel-item :key="index" v-if="rank.length">
                      <ul>
                        <li v-for="item in rank" :key="item.assetId" @click="handleClick(item)">
                          <p>
                            {{ item.assetNm }}
                          </p>
                        </li>
                      </ul>
                    </el-carousel-item>
                  </template>
                </el-carousel>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="list-box">
      <h2>标签超市，结合使用场景快速查找标签</h2>
      <p>查找你所需的数据，关注你所关注的模块</p>
      <el-tabs v-model="selectOverview" @tab-click="changeTab" class="overview">
        <el-tab-pane label="我的关注" name="overviewWatch">
          <overview-watch ref="overviewWatch"></overview-watch>
        </el-tab-pane>
        <!-- <el-tab-pane label="我的客群" name="overviewTag">
          <overview-tag ref="overviewTag"></overview-tag>
        </el-tab-pane> -->
        <el-tab-pane label="我的标签专辑" name="overviewAlbum">
          <overview-album ref="overviewAlbum"></overview-album>
        </el-tab-pane>
        <el-tab-pane label="我的分享" name="overviewShare">
          <overview-share ref="overviewShare"></overview-share>
        </el-tab-pane>
        <el-tab-pane label="我的评价" name="overviewPraise">
          <overview-praise ref="overviewPraise"></overview-praise>
        </el-tab-pane>
        <el-tab-pane label="我的浏览历史" name="overviewHistory">
          <overview-history ref="overviewHistory"></overview-history>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import searchBox from './components/search-box'
import marketCate from './components/market-cate'
import overviewWatch from './overview/overview-watch'
// import overviewTag from './overview/overview-tag'
import overviewAlbum from './overview/overview-album'
import overviewShare from './overview/overview-share'
import overviewPraise from './overview/overview-praise'
import overviewHistory from './overview/overview-history'
import market from './utils/market'
export default {
  components: {
    searchBox,
    marketCate,
    overviewWatch,
    // overviewTag,
    overviewAlbum,
    overviewShare,
    overviewPraise,
    overviewHistory
  },
  data() {
    return {
      rankList: {
        albumList: [],
        tagList: []
      },
      favList: {
        albumList: [],
        tagList: []
      },
      hotList: {
        albumList: [],
        tagList: []
      },
      swiperIcon: {
        hot: 'iconAlbum',
        hotIcons: [],
        fav: 'iconAlbum',
        favIcons: [],
        rank: 'iconAlbum',
        rankIcons: []
      },
      selectOverview: 'overviewWatch'
    }
  },
  computed: {
    deptId: {
      get() {
        return this.$store.state.user.detailInfo.deptId
      }
    }
  },
  watch: {
    deptId(val) {
      this.getHots(val)
    }
  },
  created() {
    this.getRank()
    this.getFav()
    if (this.deptId) this.getHots(this.deptId)
  },
  methods: {
    getRank() {
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/assetRankingList'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.rankList = data.data
          let icons = []
          if (this.rankList.albumList.length) icons.push('iconAlbum')
          if (this.rankList.tagList.length) icons.push('iconTag')
          this.swiperIcon.rankIcons = icons
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getFav() {
      this.$ajax({
        url: this.$ajax.setUrl('index/supermarket/rcmAssetRecommend'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.favList = data.data
          let icons = []
          if (this.favList.albumList.length) icons.push('iconAlbum')
          if (this.favList.tagList.length) icons.push('iconTag')
          this.swiperIcon.favIcons = icons
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getHots(deptId) {
      this.$ajax({
        url: this.$ajax.setUrl(`index/supermarket/assetRankingList/${deptId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.hotList = data.data
          let icons = []
          if (this.hotList.albumList.length) icons.push('iconAlbum')
          if (this.hotList.tagList.length) icons.push('iconTag')
          this.swiperIcon.hotIcons = icons
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    changeRankIcon(index) {
      this.swiperIcon.rank = this.swiperIcon.rankIcons[index]
    },
    changeFavIcon(index) {
      this.swiperIcon.fav = this.swiperIcon.favIcons[index]
    },
    changeHotIcon(index) {
      this.swiperIcon.hot = this.swiperIcon.hotIcons[index]
    },
    cateClick(id) {
      this.$blank('market-search', { query: { catalogId: id } })
    },
    changeTab(tab) {
      this.$refs[tab.name].getInfo()
    },
    onSearch(params) {
      let routeParams = {}
      if (params.keyword) routeParams.keyword = params.keyword
      if (params.classifyType) routeParams.classifyType = params.classifyType
      this.$blank('market-search', { query: routeParams })
    },
    handleClick(item) {
      market.gotoDetail(item)
      // let routeName = market.typeToRoute(Number(item.assetType))
      // this.$blank(routeName, { params: { id: item.assetId } })
    }
  }
}
</script>

<style lang="scss">
.supermarket {
  margin-top: -20px;
  padding: 10px 0;
  background-color: #fff;
  .tag-content {
    padding-left: 260px;
    padding-right: 260px;
  }
  .market-search-box {
    height: 120px;
    position: relative;
    .logo {
      font-size: 20px;
      font-weight: bold;
      color: $theme-color;
      margin-top: 30px;
      position: absolute;
      img {
        height: 60px;
        margin-right: 20px;
      }
    }
    .market-search-box {
      padding: 40px 0 0 320px;
    }
  }
  .recommend-box {
    background: url(./img/recommend_box_bg.jpg) no-repeat center center;
    background-size: 100% 100%;
    .market-cate {
      z-index: 2;
    }
    .market-cate-menu {
      float: left;
      width: 250px;
      margin-top: 5px;
    }
    .recommend {
      height: 500px;
      margin-left: 320px;
      .el-row,
      .el-col-8,
      .recommend-item {
        height: 100%;
      }
      .el-col-8 {
        padding: 30px 0;
      }
      .recommend-item {
        background: url(./img/recommend_bg.png) no-repeat center center;
        background-size: 100% 100%;
        border-radius: 10px;
        position: relative;
        overflow: hidden;
        .sign {
          width: 60px;
          height: 60px;
          position: absolute;
          top: 3px;
          left: 3px;
          border-radius: 5px;
          overflow: hidden;
        }
        .icon {
          width: 40px;
          height: 35px;
          color: #fff;
          text-align: center;
          padding-top: 10px;
          margin-right: -9px;
          position: relative;
          &.iconTag:after {
            background-color: #70a0d6;
          }
          &.iconAlbum:after {
            background-color: #51b3a6;
          }
          &:after {
            display: block;
            width: 200%;
            height: 120%;
            content: '';
            position: absolute;
            left: -65%;
            bottom: 5%;
            transform: rotate(-45deg);
          }
          svg {
            width: 22px;
            height: 22px;
            color: #fff;
            position: absolute;
            top: 6px;
            right: 12px;
            z-index: 1;
          }
        }
        h3 {
          font-size: 18px;
          line-height: 60px;
          color: #fff;
          text-align: center;
          img {
            margin: -5px 15px 0 0;
          }
        }
        .el-carousel__item {
          ul {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            li {
              height: 35px;
              line-height: 35px;
              padding-left: 40px;
              color: #fff;
              cursor: pointer;
              position: relative;
              &:hover {
                background: url(./img/recommend_select.png) no-repeat;
                background-size: 100% 120%;
              }
              p {
                margin: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              span {
                position: absolute;
                left: 10px;
                top: 0;
                svg {
                  width: 16px;
                  height: 16px;
                  margin-top: 3px;
                }
                &.increase {
                  color: $tag-green;
                }
                &.decrease {
                  color: $tag-red;
                }
              }
              .hot-icon {
                padding: 0;
                top: 0;
                left: 0;
              }
              img {
                width: 20px;
              }
            }
          }
        }
        .el-carousel__indicators {
          margin-top: -5px;
          .el-carousel__indicator {
            padding-top: 0;
            padding-bottom: 0;
            .el-carousel__button {
              width: 10px;
              height: 10px;
              border: 2px solid #fff;
              border-radius: 50%;
              background-color: transparent;
            }
            &.is-active .el-carousel__button {
              background-color: #fff;
            }
          }
        }
      }
    }
  }
  .list-box {
    max-width: 1180px;
    margin: 30px auto;
    h2 {
      font-size: 25px;
      font-weight: bold;
      text-align: center;
      margin-top: 45px;
    }
    p {
      font-size: 18px;
      margin: 30px 0 40px 0;
      text-align: center;
    }
    .overview {
      position: relative;
      .el-tabs__header .el-tabs__item {
        font-size: 16px;
      }
      .el-tabs__content {
        height: 255px;
        margin: 20px;
        padding: 20px;
        background-color: #fafafa;
        z-index: 100;
      }
      .el-tabs__item {
        width: 150px;
        text-align: center;
      }
      &:after {
        content: '';
        background-color: #eee;
        position: absolute;
        top: 100px;
        right: 0;
        bottom: 0;
        left: 0;
      }
      .el-tabs__active-bar {
        height: 3px;
      }
      ul {
        margin: 0;
        padding: 0;
        li {
          height: 40px;
          line-height: 40px;
          .el-row,
          .el-col {
            height: 100%;
            &:nth-child(2) div,
            &:last-child {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .typeIcon {
            color: $theme-color;
          }
        }
      }
      .overview-chart {
        width: 100%;
        height: 200px;
      }
      .no-records {
        text-align: center;
        p {
          margin: 30px;
          color: #a7a6a6;
        }
      }
    }
  }
}
</style>
